<!doctype html>
<html>
  <head>
    <style>{style}</style>
    <script>{script}</script>
  </head>
  <body>
    <header>
      <h1><span class="side">⇒</span> C<span class="sml">o<span class="sml">m<span class="sml">p<span class="sml">a</span>c</span>t</span>o</span>r <span class="side">⇐</span></h1>
      <div class="push"></div>
      <nav>
        <ul>
          <li><button id="Button_Page_Compress" class="active" onclick="Gui.page('Compress')">⌛ Compact</button></li>
          <li><button id="Button_Page_Settings" onclick="Gui.page('Settings')">☸ Settings</button></li>
          <li><button id="Button_Page_About" onclick="Gui.page('About')">⌕ About</button></li>
        </ul>
        <div style="text-align: right;margin: 4px">
          <small style="color: grey;"><span class="version"></span> / <span class="compile-date"></span></small>
        </div>
      </nav>
      <br>
    </header>

    <section class="page" id="Compress">
      <section id="FolderChooser">
        <div class="ctr">
          <button id="Button_Folder" onclick="Action.choose_folder()">Choose a folder</button>
        </div>
      </section>

      <section id="Activity" style="display: none;">
        <div id="Activity_Text"></div>
        <div class="ctr">
          <progress id="Activity_Progress"></progress>
        </div>
      </section>

      <section id="Command" style="display: none;">
        <div class="ctr">
          <button id="Button_Pause" class="pause" onclick="Action.pause()">⏸️ Pause</button>
          <button id="Button_Resume" class="resume" onclick="Action.resume()">▶️ Resume</button>
          <button id="Button_Stop" class="stop" onclick="Action.stop()">⏹️ Stop</button>
          <button id="Button_Analyse" class="analyse" onclick="Action.analyse()">🔍 Analyse</button>
          <button id="Button_Compress" class="compress" onclick="Action.compress()">🗜 Compress</button>
          <button id="Button_Decompress" class="decompress" onclick="Action.decompress()">⇔ Decompress</button>
        </div>
      </section>

      <section id="Analysis" style="display: none;">
        <div>
          <div class="saved"><span class="box">&nbsp;&nbsp;&nbsp;&nbsp;</span> <span id="Space_Saved">0 B</span> of <span id="Size_Logical">0 B</span> saved (<span id="Compress_Ratio">1.00</span>x, <span id="Size_Physical">0 B</span> on-disk)</div>
          <div class="compressed"><span class="box">&nbsp;&nbsp;&nbsp;&nbsp;</span> <span id="Compressed_Size">0 B</span> in <span id="File_Count_Compressed">0</span> compressed</div>
          <div class="compressible"><span class="box">&nbsp;&nbsp;&nbsp;&nbsp;</span> <span id="Compressible_Size">0 B</span> in <span id="File_Count_Compressible">0</span> compressible</div>
          <div class="excluded"><span class="box">&nbsp;&nbsp;&nbsp;&nbsp;</span> <span id="Skipped_Size">0 B</span> in <span id="File_Count_Skipped">0</span> excluded</div>
        </div>

        <div id="File_Count_Breakdown">
          <div id="Breakdown_Compressed"></div>
          <div id="Breakdown_Compressible"></div>
          <div id="Breakdown_Skipped"></div>
          <div id="Breakdown_Saved"></div>
        </div>
      </section>
    </section>

    <section class="page" id="Settings" style="display: none;">
      <label>File patterns to exclude from compression<br>
        <textarea name="exclude" id="Excludes" spellcheck="false" wrap="off"
></textarea>
      </label>

      <br>

      <label>Compression
        <select id="Compression_Mode" name="Compression">
          <option value="XPRESS4K">XPRESS4K (fast, low compression)</option>
          <option value="XPRESS8K">XPRESS8K (default)</option>
          <option value="XPRESS16K">XPRESS16K</option>
          <option value="LZX">LZX (slow, high compression)</option>
        </select></label>

      <label>Units
        <select id="SI_Units" name="SI_Units">
          <option value="I">Binary (MiB)</option>
          <option value="D">Decimal (MB)</option>
        </select>
      </label>

      <button id="Button_Save" class="save">💾 Save</button>
      <button id="Button_Reset" class="cancel">⏹️ Reset</button>
    </section>

    <section class="page" id="About" style="display: none;">
      <h1>WONKY BETA EDITION</h1>

      <p><strong>You have backups, right?</strong></p>

      <p>Problem reports: <a href="https://github.com/Freaky/Compactor">https://github.com/Freaky/Compactor</a>.</p>

      <hr>

      <p>A tiny graphical interface to Windows 10's transparent filesystem
      compression.</p>

      <p>For use with files and programs that rarely change &mdash; any file
      modifications will undo the compression for that file, so re-running this
      tool periodically is a good idea.</p>

      <p>Written in <a href="https://www.rust-lang.org/">Rust</a> (mostly) by
      <a href="https://hur.st/">Thomas Hurst</a>.</p>

      <p>GUI provided by <a
      href="https://crates.io/crates/web-view">web-view</a>. Welcome to the
      future where everything's a web browser.  Yes, even you.</p>
    </section>
  </body>
</html>
